<!--
 * new page
 * @author: xuaolei
 * @since: 2022-08-25
 * ArtistItem.vue
-->
<script setup lang="ts">
import { formartNum } from "@/utils/utils";

const router = useRouter();
defineProps({
  item: {
    // 歌手信息
    type: Object,
    required: true,
  },
});
</script>

<template>
  <div
    class="item"
    @click="router.push({ path: '/singer', query: { id: item.id } })"
  >
    <em class="circle"></em>
    <router-link
      :to="{ path: '/singer', query: { id: item.id } }"
      class="faceImg"
    >
      <el-image :src="item.picUrl + '?param=120y120'">
        <div slot="placeholder" class="image-slot">
          <i class="iconfont icon-placeholder"></i>
        </div>
      </el-image>
    </router-link>
    <div class="info">
      <div class="info-header">
        <router-link
          :to="{ path: '/singer', query: { id: item.id } }"
          class="name"
        >
          <h2>{{ item.name }}</h2>
        </router-link>
        <i class="iconfont icon-collect" :class="{ active: item.followed }"></i>
      </div>
      <div class="info-num">
        <span class="albumSize">专辑 {{ item.albumSize }}</span>
        <span class="musicSize">单曲 {{ item.musicSize || 0 }}</span>
        <span class="fansSize">粉丝 {{ formartNum(item.fansCount) || 0 }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item {
  cursor: pointer;
  position: relative;
  display: flex;
  flex: 0 0 32.5%;
  margin: 5px 0px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  border: 1px solid var(--el-bg-color-page);

  &:hover {
    box-shadow: 0 5px 1em 0px var(--el-color-info-light-7);
    background-color: var(--el-bg-color-page);

    transform: translateY(-3px);
    transition: all 0.3s ease-in-out;
  }
  // background: -moz-linear-gradient(
  //   45deg,
  //   var(--el-bg-color-page) 90%,
  //   var(--el-color-primary) 30%
  // ); /* FF3.6-15 */
  // background: -webkit-linear-gradient(
  //   45deg,
  //   var(--el-bg-color-page) 90%,
  //   var(--el-color-primary) 30%
  // ); /* Chrome10-25,Safari5.1-6 */
  // background: linear-gradient(
  //   45deg,
  //   var(--el-bg-color-page) 90%,
  //   var(--el-color-primary) 30%
  // ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  .faceImg {
    height: 80px;
    width: 80px;
    overflow: hidden;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 10px;
    flex: 1;
    .info-header {
      a > h2 {
        font-size: var(--el-font-size-medium);
        color: var(--el-text-color-primary);
      }
    }
    .info-num {
      display: flex;
      flex-direction: row;

      span {
        padding-right: 10px;
        font-size: var(--el-font-size-small);
      }
    }
  }
}
</style>
